<template>
	<!-- 附近团购 详情-->
	<view class="mapmain">
		<map style="width: 100%; height:100vh;" :latitude="latitude" :longitude="longitude" @tap="tapMap" :scale="scale"
		 :markers="markers" :controls="controls" :polyline='polyline' :circles="circles" :bindmarkertap='bindmarkertap'
		 :bindcontroltap='bindcontroltap' show-location>
		</map>
		<view class="seachinput">
			<input type="text" value="" placeholder="输入商家、分类或商圈" />
			<image class="searchlogo" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/search.png" mode=""></image>
		</view>
		<!-- 查看周边 -->
		<view class="around">
			<text style="color: #666666;font-size: 32rpx;margin-left: 20rpx;line-height: 114rpx;">{{Address.province}}{{Address.city}}{{Address.address}}</text>
			<view class="seearound" @click="go">
				<text>查看周边</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Address: [],
				addmissage: '选的位置',
				// markers: Array	标记点
				stitle: '故宫',
				latitude: "",
				longitude: "",
				scale: 14,
				markers: [],
				controls: [{
					id: 1,
					iconPath: 'https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/local.png',
					position: {
						left: 15,
						top: 260 - 50,
						width: 40,
						height: 40
					},
					clickable: true
				}],
				distanceArr: []
			}
		},
		onLoad(options) {
			this.latitude = uni.getStorageSync('latitude')
			this.longitude = uni.getStorageSync('longitude')
			this.getAddress();
		},
		methods: {
			getAddress() {
				//返回地理位置信息
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
				    }
				});
				// uni.getLocation({
				//     type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				//     success: function (res) {
				//         const latitude = res.latitude;
				//         const longitude = res.longitude;
				//         uni.openLocation({
				//             latitude: latitude,
				//             longitude: longitude,
				//             success: function (res) {
				//                 console.log('success',r);
				//             }
				//         });
				//     }
				// });
				// let obj = {
				// 	latitude: this.latitude,
				// 	longitude: this.longitude,
				// }
				// let that=this;
				// uni.openLocation({
				// 	latitude: that.latitude,
				// 	longitude: that.longitude,
				// 	success: function(res) {
				// 		console.log(res);
				// 	}
				// });

				// const requestAddress ={
				// 	url: `/api/merchant/around/map`,
				// 	method: "POST",
				// 	data: {
				// 		longitude:this.latitude,
				// 		latitude:this.longitude,
				// 		"distance":10000
				// 	},
				// 	callBack: (res) => {
				// 		this.Address = res.data
				// 		// console.log(allList)
				// 	}
				// }
				// this.$http.request(requestAddress)
			},
			go() {
				uni.navigateTo({
					url: './Around'
				})
			},
			bindcontroltap(e) {
				var that = this;
				if (e.controlId == 1) {
					that.setData({
						latitude: this.data.latitude,
						longitude: this.data.longitude,
						scale: 14,
					})
				}
			},
			tapMap(e) {
				console.log(e)
				// var that = this;
				// var id = e.currentTarget.id;
				// console.log(uni.createMapContext(id, that));
				// console.log(uni.createMapContext(id, this));
				// var maps = uni.createMapContext(id, that).$getAppMap();


				// console.log(maps)

				// maps.onclick = function(point) {
				// 	console.log(point);

				// 	point.iconPath = '/static/btn_loc0.png';
				// 	that.markers = that.markers.concat(point);

				// 	uni.showToast({
				// 		title: '添加成功',
				// 		icon: 'none'
				// 	});
				// };
			}
		}
	}
</script>

<style>
	.seachinput {
		position: fixed;
		top: 0;
	}

	.seachinput input {
		width: 650rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #FFFFFF;
		font-size: 24rpx;
		color: #999999;
		padding-left: 60rpx;
		margin-left: 20rpx;
	}

	.seachinput image {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 27rpx;
		left: 43rpx;
	}

	.around {
		width: 710rpx;
		height: 114rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 16rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
	}

	.seearound {
		width: 136rpx;
		height: 64rpx;
		background-color: #FFC300;
		border-radius: 10rpx;
		line-height: 64rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24rpx;
		margin-top: 28rpx;
		margin-left: 161rpx;
	}
</style>
